<template>
  <div class="app-container">

    <div>

      <!--搜索框-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="订单ID">
          <el-input v-model="selectForm.orderIdClr" clearable placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="所在地址:">

          <!-- 上海市 -->
          <el-input v-model="input" placeholder="请输入内容" style="width:100px" disabled></el-input>

          <!--上海市的区域-->
          <el-select v-model="areaInfo" placeholder="请选择" clearable @change="searchStreets">
            <el-option
              v-for="item in areasList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所在区域:">

          <!--上海区域的街道-->
          <el-select v-model="streetsInfo" clearable placeholder="请选择">
            <el-option
              v-for="item in streetsList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!--订单状态-->
        <el-form-item>
          <el-select v-model="selectForm.state" clearable placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="initList">查询</el-button>
        </el-form-item>
      </el-form>

    </div>


    <!--    订单列表-->
    <div class="el-row">
      <el-table
        :data="list"
        style="width: 100%">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="user.userName"
          label="下单人"
          width="120">
        </el-table-column>

        <el-table-column
          prop="areasName"
          label="所属区"
          width="180">
        </el-table-column>

        <el-table-column
          prop="streetsName"
          label="所属街道"
          width="180">
        </el-table-column>

        <el-table-column
          prop="address"
          label="详细地址"
          width="180">
        </el-table-column>

        <el-table-column
          prop="starttime"
          label="开始时间"
          width="180">
        </el-table-column>

        <el-table-column
          prop="endtime"
          label="结束时间"
          width="180">
        </el-table-column>

        <el-table-column
          prop="duration"
          label="时长"
          width="100">
        </el-table-column>

        <el-table-column
          prop="prices"
          label="价格(元)"
          width="100">
        </el-table-column>


        <el-table-column
          label="状态"
          width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.state == -1">已完成</span>
            <span v-if="scope.row.state == 0">未安排</span>
            <span v-if="scope.row.state == 1">已安排</span>
          </template>
        </el-table-column>


        <el-table-column
          label="操作"
          >
          <template slot-scope="scope"
          >
            <el-button
              size="mini"
              type="primary"
              @click="openEditVisible(scope.row.id)"
              :disabled="scope.row.state!=0"
            >修改信息
            </el-button>

            <el-button
              size="mini"
              type="success"
              @click="openDispatchVisible(scope.row)"
              :disabled="scope.row.state!=0"
            >派遣
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="cancelDispatch(scope.row)"
              :disabled="scope.row.state!=1"
            >取消派遣
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    清洁人员列表-->
    <!--    分页导航栏-->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 8, 16]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--    分页导航栏-->

    <!--模态框(修改)-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="editVisible"
        width="30%"
        :before-close="closeEditVisible">

        <!--修改用户信息-->

        <el-form>
          <el-form-item label="所属区域">
            <el-select v-model="editOrderClrForm.areasId" placeholder="请选择区域" clearable @change="searchStreets2">
              <el-option v-for="item in areasList"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属街道">
            <el-select v-model="editOrderClrForm.streetsId" clearable placeholder="请选择区域">
              <el-option v-for="item in streetsList2"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="详细地址:">
            <el-input v-model="editOrderClrForm.address" style="width: 50%"></el-input>
          </el-form-item>

          <el-form-item label="请选择预约日期:">
            <!--<span class="demonstration">请选择预约日期:</span>-->
            <el-date-picker
              v-model="editTime.BookDay"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions0"
            >
            </el-date-picker>
          </el-form-item>

          <!--<span class="demonstration">开始时间:</span>-->
          <el-form-item label="开始时间:">
            <el-time-select
              placeholder="起始时间"
              v-model="editOrderClrForm.starttime"
              format='HH:mm'
              @change="cleanTime"
              :picker-options="{
      start: '08:00',
      step: '02:00',
      end: '14:00'
    }">
            </el-time-select>
          </el-form-item>
          <!--          <el-form-item label="开始时间:">
                      <el-select
                        placeholder="起始时间"
                        clearable
                        v-model="editOrderClrForm.starttime">
                        <el-option
                          v-for="item in timeInfo"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>-->

          <el-form-item label="结束时间:">
            <!--<span class="demonstration">结束时间:</span>-->
            <el-time-select
              placeholder="结束时间"
              format='HH:mm'
              v-model="editOrderClrForm.endtime"
              disabled
              :picker-options="{
      start: '08:00',
      step: '02:00',
      end: '16:00',
      minTime: editTime.createDate
    }">
            </el-time-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="closeEditVisible">取 消</el-button>
            <el-button type="primary" @click="submitEdit" :disabled="submitOK">确 定</el-button>
          </el-form-item>
          <span slot="footer" class="dialog-footer"></span>
        </el-form>
      </el-dialog>
    </div>
    <!--模态框-->


    <!--    模态框(派遣)-->
    <div>
      <el-dialog
        title="选择派遣"
        :visible.sync="dispatchVisible"
        :before-close="closeDispatchVisible">
        <!--外派-->
        <div>
          <el-switch
            v-model="ExternalDispatchYON"
            active-color="#13ce66"
            active-text="启用外派"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div v-show="ExternalDispatchYON">
          <el-form>
            <el-form-item label="所属区域">
              <el-select v-model="ExternaDispatch.areasId" placeholder="请选择区域" clearable @change="searchStreets3">
                <el-option v-for="item in areasList"
                           :key="item.code"
                           :label="item.name"
                           :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属街道">
              <el-select v-model="ExternaDispatch.streetsId" clearable placeholder="请选择区域">
                <el-option v-for="item in streetsList3"
                           :key="item.code"
                           :label="item.name"
                           :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="selectSomeClrList" >确 定</el-button>
            </el-form-item>

          </el-form>
        </div>
        <!--外派-->
        <el-table
          :data="dispatchList"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="clrName"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            label="头像"
            width="180"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px;border-radius: 10%"
                :src="scope.row.clrImg"
                :fit="fit"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope"
            >
              <el-button
                size="mini"
                type="primary"
                @click="submitDispatch(scope.row.id)"
              >立即派遣
              </el-button>
            </template>
          </el-table-column>


        </el-table>

      </el-dialog>
    </div>
    <!--    <div>
          {{streetsList2}}
        </div>
        <div>
          {{editOrderClrForm.areasId}}
        </div>
        <div>
          {{editOrderClrForm}}
        </div>-->
    <!--    <div>
          {{this.editOrderClrForm.starttime}}
        </div>
        <div>
          {{this.editOrderClrForm.endtime}}
        </div>
        <div>
          {{this.editOrderClrForm}}
        </div>
        <div>
          {{this.editTime.BookDay}}
        </div>-->
  </div>
</template>

<script>

import {
  cancelDispatchR,
  dispatchCleanerList, editDispatch,
  editOneOrderClr,
  orderClrAllList,
  selectOneOrderClr
} from "@/api/houseServiceApi/OrderClrApi";
import {searchAreasDetail} from "@/api/areaApi/areaApi";
import {searchStreetsDetail} from "@/api/streetsApi/streetsApi";

export default {
  data() {
    return {

      ExternalDispatchYON:false,
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      submitOK: true,
      editVisible: false,
      dispatchVisible: false,
      stateList: [{
        value: '0',
        label: '未安排'
      }, {
        value: '1',
        label: '已安排'
      }, {
        value: '-1',
        label: '已经完成的订单'
      }],
      input: '上海市',
      areaInfo: '',
      areasList: [],
      streetsInfo: '',
      streetsList: [],
      streetsList2: [],
      streetsList3: [],
      selectForm: {
        orderIdClr: '',
        state: '',
      },
      pageNum: 1,
      pageSize: 2,
      total: 0,
      list: [],
      editOrderClrForm: {},
      editTime: {
        BookDay: '',
        createDate: '',
        lastModifyDate: '',
      },
      orderClrId:'',
      orderStarttime:'',
      orderDuration:'',
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now();//如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      dispatchList: [],
      ExternaDispatch:{
        areasId:'',
        streetsId:'',
      }



    }
  },
  methods: {
    selectSomeClrList(){
      dispatchCleanerList({
        starttime: this.orderStarttime + "", duration: this.orderDuration + "",
        areasId: this.ExternaDispatch.areasId, streetsId: this.ExternaDispatch.streetsId
      }).then((res) => {
        console.log(res.data.list)
        this.dispatchList = res.data.list;
      })
    },
    cancelDispatch(res){
      console.log(res)
      cancelDispatchR({
        id:res.id,
        clrId:res.clrId,
        starttime:res.starttime,
        duration:res.duration,
      }).then((res)=>{
        this.initList();
      })

    },
    submitDispatch(res){
      console.log(res)
      console.log(this.orderClrId)
      editDispatch({orderClrId:this.orderClrId,clrId:res,orderStarttime:this.orderStarttime,orderDuration:this.orderDuration}).then(()=>{
        this.initList();
        this.closeDispatchVisible()
      })
    },
    openDispatchVisible(item) {
      this.ExternalDispatchYON=false;
      console.log("+++++++++++++");
      console.log(item);
      this.orderClrId=item.id;
      this.orderStarttime=item.starttime + "";
      this.orderDuration=item.duration + "";
      this.ExternaDispatch.areasId=item.areasId;
      this.ExternaDispatch.streetsId=item.streetsId;
      this.searchStreets4();

      dispatchCleanerList({
        starttime: item.starttime + "", duration: item.duration + "",
        areasId: item.areasId, streetsId: item.streetsId
      }).then((res) => {
        console.log(res.data.list)
        this.dispatchList = res.data.list;

      })

      this.dispatchVisible = true;
    },
    closeDispatchVisible() {
      this.dispatchVisible = false;
    },
    cleanTime() {
      let d = parseInt(this.editOrderClrForm.starttime) + parseInt(this.editOrderClrForm.duration);

      /*console.log(d)*/

      if (d > 16) {
        this.editOrderClrForm.starttime = '08:00';

        d = parseInt(this.editOrderClrForm.starttime) + parseInt(this.editOrderClrForm.duration);

        d = d + ':00';

        this.editOrderClrForm.endtime = d;

      } else {

        d = d + ':00';

        /*console.log(this.editOrderClrForm.duration)*/

        /*console.log(d)*/

        this.editOrderClrForm.endtime = d;
      }


      /*this.editTime.lastModifyDate = '';
      this.editTime.price = '';
      this.editTime.lastModifyDate = this.editTime.lastModifyDate + this.editOrderClrForm.duration;*/
    },
    resultPrice() {
      let time = this.editTime.lastModifyDate.substring(0, 2) - this.editTime.createDate.substring(0, 2)
      /*console.log(this.editTime.lastModifyDate.substring(0, 2))
      console.log(this.editTime.createDate.substring(0, 2))
      console.log(time)*/
      /*if (time == 2) {
        this.editTime.price = 200
      } else if (time == 4) {
        this.editTime.price = 400
      } else if (time == 6) {
        this.editTime.price = 600
      } else this.editTime.price = 800
*/
    },
    submitEdit() {

      editOneOrderClr({
        id: this.editOrderClrForm.id,
        areasId: this.editOrderClrForm.areasId,
        streetsId: this.editOrderClrForm.streetsId,
        address: this.editOrderClrForm.address,
        BookDay: this.editTime.BookDay,
        starttime: this.editOrderClrForm.starttime,
        endtime: this.editOrderClrForm.endtime
      })
        .then((res) => {
          this.closeEditVisible();
          this.initList();
        })
    },
    closeEditVisible() {
      this.editVisible = false;
      this.submitOK = true;
    },

    // 修改查询
    openEditVisible(id) {
      selectOneOrderClr({id: id}).then((res) => {

        /*console.log(res.data);*/
        this.editOrderClrForm = res.data.obj;
        this.searchStreets2TP();
        /*this.editOrderClrForm.createDate+''  .substring(this.editOrderClrForm.createDate.toString().indexOf(" "))*/


        let b1 = this.editOrderClrForm.starttime;
        b1 = b1.substring(0, b1.indexOf(" "))

        this.editTime.BookDay = b1;

        /*处理时间信息*/
        let a = this.editOrderClrForm.starttime + '';
        let b = a.substring(a.indexOf(' '));
        b = b.substring(1, b.lastIndexOf('-'));
        b = b.replaceAll('-', ':')
        /*console.log(b);*/
        this.editOrderClrForm.starttime = b;

        let c = b.substring(0, b.indexOf(":"))

        let d = parseInt(c) + parseInt(this.editOrderClrForm.duration) + ':00';

        /*console.log(this.editOrderClrForm.duration)

        console.log(d)*/

        this.editOrderClrForm.endtime = d;

        /*处理提交按钮是否允许访问*/
        let f = (this.editOrderClrForm.state == "0");
        /*console.log("++++++++++++++++++++++")
        console.log(f)*/
        if (f) {
          this.submitOK = false;
        }

      });
      this.editVisible = true;
    },
    initList() {
      orderClrAllList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orderIdClr: this.selectForm.orderIdClr,
        areasId: this.areaInfo,
        streets_id: this.streetsInfo,
        state: this.selectForm.state
      }).then((res) => {
        /*console.log(res.data.pageInfo.list)*/
        this.list = res.data.pageInfo.list;
        this.total = res.data.pageInfo.total;
      })
    },
    handleSizeChange(size) {
      this.pageNum = 1;
      this.pageSize = size;
      this.initList();
    },
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initList();
    },

    //查找街道区域联动
    searchStreets() {
      searchStreetsDetail({code: this.areaInfo}).then((res) => {
        /*console.log(res);*/
        this.streetsList = res.data.streetList;
        this.streetsInfo = '';
      })
    },

    searchStreets2() {
      searchStreetsDetail({code: this.editOrderClrForm.areasId}).then((res) => {
        /*console.log(res);*/
        this.streetsList2 = res.data.streetList;
        this.editOrderClrForm.streetsId = '';
      })
    },

    searchStreets3() {
      searchStreetsDetail({code: this.ExternaDispatch.areasId}).then((res) => {
        /*console.log(res);*/
        this.streetsList3 = res.data.streetList;
        this.ExternaDispatch.streetsId = '';
      })
    },

    searchStreets4() {
      searchStreetsDetail({code: this.ExternaDispatch.areasId}).then((res) => {
        /*console.log(res);*/
        this.streetsList3 = res.data.streetList;
      })
    },

    searchStreets2TP() {
      searchStreetsDetail({"code": this.editOrderClrForm.areasId}).then((res) => {
        this.streetsList2 = res.data.streetList;
      })
    },

    sleep(ms) { //sleep延迟方法2
      var unixtime_ms = new Date().getTime();
      while (new Date().getTime() < unixtime_ms + ms) {
      }
    },

    //查找区列表
    searchAreas() {
      searchAreasDetail().then((res) => {
        /*console.log(res);*/
        this.areasList = res.data.areaList;
      })
    },
  },
  created() {
    this.initList();
    this.searchAreas();
  }
}

</script>
<style scoped>

</style>
